//@ts-nocheck
import React from '../../react'
import ReactDOM from '../../react-dom';

class ChildCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {number: 0}
    console.log('ChildCounter constructor');
  }

  componentWillMount(){
    console.log('ChildCounter componentWillMount');
  }

  handleClick = () => {
    this.setState(state => ({number: state.number + 1}));
  };

  shouldComponentUpdate(nextProps, nextState){
    console.log('ChildCounter shouldComponentUpdate');
    return nextProps.number > 2;
  }

  componentWillUpdate(){
    console.log('ChildCounter componentWillUpdate');
  }

  componentDidUpdate(){
    console.log('ChildCounter componentDidUpdate')
  }

  componentWillReceiveProps(nextProps){
    console.log('ChildCounter componentWillReceiveProps')
  }

  componentWillUnmount(){
    console.log('componentWillUnmount');
  }

  componentDidMount(){
    console.log('ChildCounter componentDidMount')
  }

  render(){
    console.log('ChildCounter render');
    return (
      <div>
        {this.props.number}
      </div>
    );
  }
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {number: 0}
    console.log('Counter constructor');
  }

  componentWillMount(){
    console.log('Counter componentWillMount');
  }

  handleClick = () => {
    this.setState(state => ({number: state.number + 1}));
  };

  shouldComponentUpdate(nextProps, nextState){
    console.log('Counter shouldComponentUpdate');
    return nextState.number > 1;
  }

  componentWillUpdate(){
    console.log('Counter componentWillUpdate');
  }

  componentDidUpdate(){
    console.log('Counter componentDidUpdate')
  }

  componentDidMount(){
    console.log('Counter componentDidMount')
  }

  render(){
    console.log('Counter render');
    return (
      <div>
        <p>{this.state.number}</p>
        {
          this.state.number > 3? null: <ChildCounter number={this.state.number}/>
        }
        <button onClick={this.handleClick}>+</button>
      </div>
    );
  }
}

ReactDOM.render(
  <Counter/>,
  document.getElementById('root')
);
